<!-- 添加附加项目核销-组件模板 -->
<template>
	<view class="transportDoms blueBgDoms">
		<view class="contentDoms">
			<scroll-view
				class="list-scroll-content" 
				scroll-y 
				@scrolltolower="loadData"
			>
				<view v-for="(item,index) in goodsList" :key="index" class="itemDoms">
					<!-- 列表信息 -->
					<view class="flexDom marginBottom20">
						<text class="marginRight30 color666">项目名称：</text>
						<text class="flexOne textRight">{{item.projectName}}</text>
					</view>
					<view class="textRight">
						<button class="mini-btn blueBtn radusBtn" size="mini" @click.stop="oOrCPopup('inputDialog', true, item)">核销</button>
					</view>
				</view>
				<!-- 加载更多 -->
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
		
		<!-- 核销-设置服务次数-输入框-确认- -->
		<view @touchmove.stop.prevent="">
			<uni-popup class="blackTitle" ref="inputDialog2" type="dialog">
				<view class="comonPopup">
					<view class="fontSize16 fontWeight textCenter marginBottom30">设置服务次数</view>
					<uni-forms ref="valiForm" :rules="rules" :modelValue="formData" label-position="top" label-width="100%">
						<uni-forms-item label="总服务次数" required name="totalServiceCount">
							<uni-easyinput v-model="formData.totalServiceCount" type="digit" maxlength="10" placeholder="请填写总服务次数" />
						</uni-forms-item>
						<uni-forms-item label="剩余服务次数（不包含本次服务）" required name="remainServiceCount">
							<uni-easyinput v-model="formData.remainServiceCount" type="digit" maxlength="10" placeholder="请填写剩余服务次数" />
						</uni-forms-item>
					</uni-forms>
					<!-- <view class="marginBottom30 colorRed">确认要终止此单吗？终止后系统将扣除您的定金支付给司机</view> -->
					<view class="flexDom">
						<button class="grayBtn flexOne marginRight20" @click="oOrCPopup('inputDialog2', false)">关闭</button>
						<button class="greenBtn flexOne" @click="dialogInputConfirm2('valiForm')">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 核销-输入框-确认- -->
		<view @touchmove.stop.prevent="">
			<uni-popup class="blackTitle" ref="inputDialog" type="dialog">
				<view class="comonPopup">
					<view class="fontSize16 fontWeight textCenter marginBottom30">核销</view>
					<uni-forms ref="valiForm" :rules="rules" :modelValue="formData" label-position="top" label-width="100%">
						<uni-forms-item label="本次服务次数" required name="useCount">
							<uni-easyinput v-model="formData.useCount" type="digit" maxlength="10" placeholder="请填写本次服务次数" />
						</uni-forms-item>
						<uni-forms-item label="备注" name="remark">
							<uni-easyinput v-model="formData.remark" type="textarea" maxlength="500" placeholder="请输入备注" />
						</uni-forms-item>
					</uni-forms>
					<!-- <view class="marginBottom30 colorRed">确认要终止此单吗？终止后系统将扣除您的定金支付给司机</view> -->
					<view class="flexDom">
						<button class="grayBtn flexOne marginRight20" @click="oOrCPopup('inputDialog', false)">关闭</button>
						<button class="greenBtn flexOne" @click="dialogInputConfirm('valiForm')">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<!-- 组件核心js -->
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				currIndex: 0, // 默认全部
				currOrder: null,  // 当前选中的单子
				queryObject: {
					shopId: '', 		// 门店ID
					shopName: '',  		// 门店名称
					customerName: '' , 	// 客户名称
					productId: ''   	// 商品id
				},
				loadingType: 'more', //加载更多状态
				goodsList: [],
				formData: {
					useCount: null,
					remark: '',
					totalServiceCount: null,
					remainServiceCount: null
				},
				rules: {
					useCount: {rules: [{required: true,errorMessage: '本次服务次数不能为空'}]},
					totalServiceCount: {rules: [{required: true,errorMessage: '总服务次数不能为空'}]},
					remainServiceCount: {rules: [{required: true,errorMessage: '剩余服务次数不能为空'}]},
				}
			};
		},
		onLoad(options){
			// 传值接收并赋值-门店ID
			if(options.shopId) {
				this.queryObject.shopId = options.shopId;
			}
			// 传值接收并赋值-门店名称
			if(options.shopName) {
				this.queryObject.shopName = options.shopName;
			}
			// 传值接收并赋值-客户名称
			if(options.customerName) {
				this.queryObject.customerName = options.customerName;
			}
			// 初始化分页-参数
			this.queryObject = this.$PageInit(this.queryObject);
			// 加载数据
			this.loadData();
		},
		//下拉刷新
		/* onPullDownRefresh(){
			// 分页页数-初始化
			this.queryObject.pageIndex = this.$Setting.PAGEINDEX;
			// console.log("下拉刷新!!!!");
			this.loadData('refresh');
		}, */
		//加载更多
		/* onReachBottom(){
			this.loadData();
			// console.log("加载更多!!!!");
		}, */
		methods: {
			
			/**
			 * 加载技师列表 ，带下拉刷新和上滑加载-函数
			 * */
			async loadData(type, loading) {
				if(this.loadingType === 'nomore'){
					//防止重复加载
					return;
				}
				// 获取订单投诉数据
				this.$myFormDataHttps(this.$apiNames.KH_ORDERSDTL_PROJECT, this.queryObject).then(res => {
					if(res.code == 0) {
						// 赋值
						this.goodsList = res.data;
						//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
						this.loadingType  = 'nomore';
						if(type === 'refresh'){
							if(loading == 1){
								uni.hideLoading()
							}else{
								uni.stopPullDownRefresh();
							}
						}
					} else {
						this.$Msg(res.msg);
					}
				}).catch((err) => {
					console.log("err == ", err);
					// 提示信息
					// this.$Msg(err.errMsg);
					if(err.errMsg == 'request:fail') {
						// 测试赋值
						this.testData();
					}
				})
			},
			
			/**
			 * 测试数据-函数
			 * */
			async testData() {
				// 测试数据
				let arr = [{
					id: '1002002001',
					projectName: '养护皮肤',
					company: '周口市远大运输集团运达特种货物运输有限公司',
					customerName: '王大锤',
					goodsName: '二叔丁基过氧化物',
					payMoney: 1000,
					totalServiceCount: 10,
					nums2: 8,
					nums3: 1,
					remark: '根本个人的实际情况使用。',
					signingTime: '2024-03-01 11:00:00'
				},{
					id: '1002002002',
					projectName: '保湿水润膏',
					company: '周口市远大运输集团运达特种货物运输有限公司',
					customerName: '王大锤',
					goodsName: '二叔丁基过氧化物',
					payMoney: 1000,
					totalServiceCount: null,
					nums2: 9,
					nums3: 1,
					remark: '根本个人的实际情况使用。',
					signingTime: '2024-03-02 15:00:00'
				},{
					id: '1002002003',
					projectName: '柔顺光泽膏',
					company: '周口市远大运输集团运达特种货物运输有限公司',
					customerName: '王大锤',
					goodsName: '二叔丁基过氧化物',
					payMoney: 1000,
					totalServiceCount: 10,
					nums2: 6,
					nums3: 1,
					remark: '根本个人的实际情况使用。',
					signingTime: '2024-03-12 18:00:00'
				},{
					id: '1002002001',
					projectName: '水润光滑',
					company: '周口市远大运输集团运达特种货物运输有限公司',
					customerName: '王大锤',
					goodsName: '二叔丁基过氧化物',
					payMoney: 1000,
					totalServiceCount: 10,
					nums2: 4,
					nums3: 2,
					remark: '根本个人的实际情况使用。',
					signingTime: '2024-03-01 11:00:00'
				},{
					id: '1002002002',
					projectName: '水乳',
					company: '周口市远大运输集团运达特种货物运输有限公司',
					customerName: '王大锤',
					goodsName: '二叔丁基过氧化物',
					payMoney: 1000,
					totalServiceCount: 10,
					nums2: 5,
					nums3: 1,
					remark: '根本个人的实际情况使用。',
					signingTime: '2024-03-02 15:00:00'
				},{
					id: '1002002003',
					projectName: '化妆品',
					company: '周口市远大运输集团运达特种货物运输有限公司',
					customerName: '王大锤',
					goodsName: '二叔丁基过氧化物',
					payMoney: 1000,
					totalServiceCount: 10,
					nums2: 7,
					nums3: 2,
					remark: '根本个人的实际情况使用。',
					signingTime: '2024-03-12 18:00:00'
				}];
				// 测试赋值
				this.goodsList = this.goodsList.concat(arr);
			},
			
			/**
			 * 打开/关闭-popup弹出框-函数
			 */
			oOrCPopup(id, flag, item){
				// 如果存在，就赋值
				if(item) {
					this.currOrder = item;
				}
				// 如果是true是打开，close是关闭
				if(flag) {
					this.$refs[id].open();
				} else {
					this.$refs[id].close();
				}
			},
			
			/**
			 * 打开/关闭-popup弹出框-函数
			 */
			oOrCPopup2(id, flag, item){
				// 如果存在，就赋值
				if(item) {
					this.currOrder = item;
					// 如果是特殊，需要根据item判断--如果总服务是空，未设置，就去设置
					if(!item.totalServiceCount) {
						// 如果是打开
						if(flag) {
							this.$refs[id+'2'].open();
						} else {
							this.$refs[id+'2'].close();
						}
					} else {
						// 如果是true是打开，close是关闭
						if(flag) {
							this.$refs[id].open();
						} else {
							this.$refs[id].close();
						}
					}
				}
			},
			
			/**
			 * 【核销-确定】弹出框-确定-功能-函数
			 */
			dialogInputConfirm(ref) {
				this.$refs[ref].validate().then(res => {
					// 提示信息
					this.$Msg("操作成功~");
					// 整理数据，传值山个页面--深度赋值
					let obj = JSON.parse(JSON.stringify(this.currOrder));
					// 额外赋值
					obj.useCount = this.formData.useCount;
					obj.remark = this.formData.remark;
					// this.$PrePage()获取上一页实例，在App.vue定义
					this.$PrePage().selectPagesData(obj, '3');
					// 返回上上一页
					uni.navigateBack();
				}).catch(err => {
					this.$Msg('请填写本次服务次数~');
					console.log('err', err);
				})
			},
			
			/**
			 * 【设置服务次数】弹出框-确定-功能-函数
			 */
			dialogInputConfirm2(ref) {
				this.$refs[ref].validate().then(res => {
					let obj = {
						id: this.currOrder.id, 		// 当前产品的ID
						totalServiceCount: this.formData.totalServiceCount,  // 总服务次数
						remainServiceCount: this.formData.remainServiceCount  // 剩余服务次数
					};
					this.$myHttps(this.$apiNames.KH_ORDERSDTL_SAVE, obj).then(res => {
						if(res.code == 0) {
							// 初始化数据
							this.loadData('refresh');
							// 提示信息
							this.$Msg(res.msg ? res.msg : "设置服务次数成功~");
							// 关闭窗口后，恢复默认内容
							this.oOrCPopup('inputDialog2', false);
							// 清空数据
							this.formData.totalServiceCount = '';
							this.formData.remainServiceCount = '';
						} else {
							this.$Msg(res.msg ? res.msg : '设置服务次数系统错误，请联系管理员~');
						}
					})
				}).catch(err => {
					this.$Msg('请正确填写表单~');
					console.log('err', err);
				})
			},
		}
	}
</script>

<!-- 当前页面css -->
<style lang="scss" scoped>
	.popup-content {
		min-width: 600upx;
		padding: 100upx 30upx;
		background-color: #FFFFFF;
	} 
	.comonPopup{
		background-color: #FFFFFF;
		padding: 40upx 30upx;
		box-sizing: border-box;
		width: 300px;
	}
	.transportDoms {
		position: relative;
		height: 100vh;
		.scroll-view {
			white-space: nowrap;
			width: 100%;
		}
		.itemDoms {
			background: white;
			margin: 0 30upx 30upx;
			padding: 30upx;
			border-radius: 10upx;
		}
		.headerSearchDoms {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			// #ifdef H5
			top: 44px;
			// #endif
			z-index: 9;
			.sousDoms {
				margin: 0 10upx;
			}
			.searchBtns {
				background: #FFFFFF;
				display: inline-block;
				color: #000000;
				width: 120upx;
				text-align: center;
				line-height: 34px;
				border-radius: 10upx;
			}
			.searchDoms {
				margin: 0 20upx;
				.searchFiled {
					color: white;
					padding: 12upx 20upx;
				}
				.searchFiledActive {
					position: relative;
					font-weight: bold;
					&::after {
						content: '';
						background: white;
						width: 30upx;
						height: 6upx;
						border-radius: 3px;
						position: absolute;
						left: 50%;
						bottom: 0;
						margin-left: -15upx;
					}
				}
			}
			::v-deep .uni-searchbar__box {
				border: 1px solid #EEEEEE;
			}
		}
		.contentDoms {
			overflow: hidden;
			.list-scroll-content {
				height: 100%;
			}
		}
		::v-deep uni-button[size="mini"] {
			height: inherit;
			padding: 0 1em;
		}
	}
</style>